<template>
	<view class="box">
		<u-navbar :title="navTitle" @leftClick="leftClick" @rightClick="rightClick"   :placeholder="true">
		<!-- 	<view class="u-nav-slot" slot="right">
				<u-icon name="edit-pen" label="编辑" labelColor="#f05a23" color="#f05a23" size="20"></u-icon>
			</view> -->
		</u-navbar>
		<!-- 	<u-navbar title="房源详情" rightText="" :safeAreaInsetTop="true" @leftClick="leftClick" @rightClick="rightClick">
			<view class="u-nav-slot" slot="right">
				<u-icon name="edit-pen" label="编辑" labelColor="#68a5e8" color="#68a5e8" size="20"></u-icon>
			</view>
		</u-navbar> -->

		<view class="card_head">
			<view class="icon" @click="contact">
				<u-image :showLoading="true" shape="circle" src="../../../static/operate/phone1.png" width="80rpx"
					height="80rpx"></u-image>
				<view class="">
					联系租客
				</view>
			</view>
			<view class="column">
				租客姓名: {{data.tenantName}}
			</view>
			<view class="column">
				性&#12288&#12288别:{{data.tenantGender == 0 ? '男' : '女'}}
			</view>

			<view class="flexBetween">
				<view class="column">
					联系电话: {{data.tenantPhone}}
				</view>
				<view class="column">
				<!-- 	<view class="" style="margin-left: 40rpx;">
						<u-button color="#f05a23" text="删除租约" @click="deleteLease"></u-button>
					</view> -->
				</view>
			</view>
			<u-popup :show="show" mode="center" :round="10" @close="show = false">
				<view class="popup">
					<view class="cue">
						拨打{{data.tenantPhone}}
					</view>
					<view class="button_box">
						<u-button color="#f05a23" class="sure" @tap="showDetermine">确定</u-button>
						<u-button @click="show = false">取消</u-button>
					</view>
				</view>
			</u-popup>

			<u-popup :show="brokershow" mode="center" :round="10" @close="brokershow = false">
				<view class="popup">
					<view class="cue">
						拨打{{data.brokerPhone}}
					</view>
					<view class="button_box">
						<u-button color="#f05a23" class="sure" @tap="showDetermineToBroker">确定</u-button>
						<u-button @click="brokershow = false">取消</u-button>
					</view>
				</view>
			</u-popup>

		</view>
		<u-tabs :list="list1" lineWidth="60" activeStyle="color: #f05a23" lineColor="#f05a23" itemStyle="padding:0 34px;height: 40px;"
			@click="click"></u-tabs>

		<view class="module" v-if="index ==0">
			<view class="card">

				<view class="row">
					<view class="title">
						签约房源
					</view>
					<view class="data">
						{{data.houseRoomName}}
					</view>
				</view>
				<view class="row">
					<view class="title">
						起止日期
					</view>
					<view class="data">
						{{data.beginDate}}/{{data.endDate}}
					</view>
				</view>
				<view class="row">
					<view class="title">
						租期
					</view>
					<view class="data">
						{{data.tenancyTerm}}个月
					</view>
				</view>
				<view class="row">
					<view class="title">
						入住人数
					</view>
					<view class="data">
						{{data.peopleNumber}}人
					</view>
				</view>
				<view class="row">
					<view class="title">
						提前交租天数
					</view>
					<view class="data">
						{{data.rentDay}}天
					</view>
				</view>
				<view class="row">
					<view class="title">
						交租方式
					</view>
					<view class="data">
						{{data.rentPayMode}}月一付
					</view>
				</view>
				<view class="row">
					<view class="title">
						租金
					</view>
					<view class="data">
						{{data.rent}}
					</view>
				</view>
				<view class="row">
					<view class="title">
						房屋押金
					</view>
					<view class="data">
						{{data.deposit}}
					</view>
				</view>
				<view class="row" v-if="this.brokerPhone!=''&&this.brokerPhone!=null">
					<view class="title">
						房东电话
					</view>
					<view class="data">
						{{data.brokerPhone}}
					</view>
					<u-image :showLoading="true" shape="circle" src="../../../static/operate/phone1.png" width="45rpx"
						height="45rpx" style="margin-left: -200rpx;" @click="contactToBroker()"></u-image>
				</view>

			</view>

		</view>

		<!-- 未收费用 -->
		<view class="module" v-if="index ==1">
			<view class="card" v-for="(item, index) in data.uncollectedList" :key="item.id">
				<template v-if="item.payStatus == 0">
					<view class="row">
						<view class="houseRoomName">
							{{data.houseRoomName}}
						</view>
					</view>
					<view class="row">
						<view class="title">
							租金
						</view>
						<view class="data">
							{{item.billAmount}}
						</view>
					</view>

					<view class="row">
						<view class="title">
							账期
						</view>
						<view class="data">
							{{item.billPeriod}}
						</view>
					</view>
					<view class="row">
						<view class="title">
							约定提前收租日
						</view>
						<view class="tab">
							{{item.receivableDate}}
						</view>
					</view>
				</template>

			</view>
		</view>

		<view class="module" v-if="index ==2">
			<view class="card" v-for="(item,index) in data.receivedList" :key="item.id">
				<template v-if="item.payStatus == 2">
					<view class="row">
						<view class="houseRoomName">
							{{data.houseRoomName}}
						</view>
					</view>
					<view class="row">
						<view class="title">
							租金(1个月)
						</view>
						<view class="data">
							{{item.actualAmount}}
						</view>
					</view>

					<view class="row">
						<view class="title">
							账期
						</view>
						<view class="data">
							{{item.billPeriod}}
						</view>
					</view>
					<view class="row">
						<view class="title">
							约定提前收租日
						</view>
						<view class="tab">
							{{item.receivableDate}}
						</view>
					</view>
				</template>
			</view>
		</view>

		<template class="card"  v-if="download_view && index == 0">
			<view class="" style="padding-left: 30rpx; box-sizing: border-box;">
				<view class="contract" v-if="data.mediaList.length">
					<view style="margin-right: 20rpx;">
						纸质合同
					</view>
					<view class="tab _a" @click="download">
						下载
					</view>
				</view>
				<swiper :current="current" @change="handleChange">
					<swiper-item v-for="(item, index) of data.mediaList" :key="index">
						<u--image :showLoading="true" :src="item.mediaUrl || '../../../static/default/404.png'"
							width="80px" height="100px" style="display: inline-block; margin-right: 10rpx;"
							@click="magnify(index)"></u--image>
					</swiper-item>
				</swiper>
			</view>
		</template>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	// import {
	// 	getLeaseDetail
	// } from '@/api/lease/index.js';
	import {
		HouseDetail,
		landlordLeaseHouse,
		deleteLease
	} from "@/api/house/index.js"
	export default {
		data() {
			return {
				navTitle: '租约详情',
				download_view: false,
				data: {},
				id: 0,
				index: 0,
				current: 0,
				show: false,
				brokershow: false,
				phoneNumber: '',
				brokerPhone: '',
				brokerId: '',
				list1: [{
					name: '租约信息',
				}, {
					name: '未收费用',
				}, {
					name: '已收费用'
				}],
				list: [{
						title: '2023.12-19/2024-01-08',
						tab: '线下支付',
						tiem: ':2023.12-19',
						money: '770.00'
					},
					{
						title: '2023.12-19/2024-01-08',
						tab: '线下支付',
						tiem: ':2023.12-19',
						money: '770.00'
					}, {
						title: '2023.12-19/2024-01-08',
						tab: '线下支付',
						tiem: ':2023.12-19',
						money: '770.00'
					}
				],
				src: '../../../static/defalut/404.png'
			}
		},
		onLoad(optien) {
			console.log(optien);
			this.id = optien.id;
			if(optien.state == '2'){
				this.navTitle = '历史租约'
			}
			setTimeout(() => {
				this.download_view = true
			}, 1000)
		},
		onShow() {
			this.leaseDetail(this.id)
		},
		methods: {
			async deleteLease() {
				const res = await deleteLease(this.id)
				if (res.data.code != 200) return this.$refs.uToast.show({
					message: res.data.msg,
					type: 'error'
				})

				this.$refs.uToast.show({
					message: '删除成功',
					type: 'success'
				})
				setTimeout(() => {
					 uni.navigateBack(-1)
				}, 1000)


			},

			leftClick() {
				uni.navigateBack(-1)
			},
			rightClick() {
				console.log(2131232);
				uni.navigateTo({
					url: '../lease/leaseEdit?id=' + this.id + "&data=" + JSON.stringify(this.data),
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})
			},
			//合同详情
			magnify(index) {
				uni.previewImage({
					urls: this.data.mediaList.map(item => item.mediaUrl)
				});
			},
			handleChange(index) {
				this.current = index;
			},
			download() {
				if (this.data.mediaList.length == 0) return this.$refs.uToast.show({
					message: '暂无文件',
					type: 'error'
				})
				var that = this
				that.data.mediaList.map((item, index) => {
					uni.downloadFile({
						url: item.mediaUrl, // 需要下载的文件的网络地址
						success: function(res) {
							if (res.statusCode === 200) { // 确保请求成功
								// res.tempFilePath 是临时文件路径
								// 可以通过这个路径打开文件或者保存到本地指定位置
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function(saveRes) {
										// console.log('文件保存成功，存储路径为：', saveRes.savedFilePath);
										that.$refs.uToast.show({
											message: '文件已保存',
											type: 'success'
										})
									},
									fail: function(err) {
										// console.error('文件保存失败', err);
										that.$refs.uToast.show({
											message: '文件保存失败',
											type: 'error'
										})
									}
								});
							} else {
								// console.error('下载文件失败，状态码：', res.statusCode);
								that.$refs.uToast.show({
									message: '下载文件失败',
									type: 'error'
								})
							}
						},
						fail: function(err) {
							that.$refs.uToast.show({
								message: '下载文件失败',
								type: 'error'
							})
						}
					});
				})

			},
			contact() {
				this.show = true
			},

			showDetermine() {
				uni.makePhoneCall({
					phoneNumber: this.phoneNumber
				});
			},
			contactToBroker() {
				this.brokershow = true
			},
			showDetermineToBroker() {
				uni.makePhoneCall({
					brokerPhone: this.brokerPhone
				});
			},
			click(item) {
				this.index = item.index
			},
			remark() {
				uni.navigateTo({
					url: './remark',
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})
			},
			clickDeail() {
				uni.navigateTo({
					url: './contract',
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})
			},
			async leaseDetail(id) {
				const _this = this

				const res = await landlordLeaseHouse(id)
               
				// console.log(res);
				if (res.data.code != 200) {
					this.$refs.uToast.show({
						message: res.data.msg,
						type: 'error'
					})
					setTimeout(() => {
						uni.navigateBack(-1)
					}, 1000)
					return
				}

				this.data = res.data.data
				console.log(res);
				this.phoneNumber = res.data.data.tenantPhone
				this.brokerPhone = res.data.data.brokerPhone
				this.brokerId = res.data.data.brokerId
				console.log(this.data.receivedList, 111);
				console.log(this.data.uncollectedList, 111);
				_this.data = res.data.data
				_this.phoneNumber = res.data.data.tenantPhone
				_this.brokerPhone = res.data.data.brokerPhone
				_this.brokerId = res.data.data.brokerId
				console.log(_this.data.receivedList, 111);
				console.log(_this.data.uncollectedList, 111);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/styles/index.scss";
	@import "~@/styles/global.scss";
	$pageColor: #f05a23; 

	.tab {
		background-color: $pageColor;
		color: #fff;
		padding: 5rpx 20rpx;
		font-size: 26rpx;
	}

	._a {
		border-radius: 30rpx;
	}

	.tab_ {
		background-color:$pageColor;
		color: $pageColor;
		padding: 5rpx 20rpx;
		font-size: 26rpx;
		border-radius: 30rpx;
	}

	.money {
		font-weight: bold;
	}

	.box {
		background-color: $pagebgc;
		min-height: 100vh;
		max-height: 100%;
		box-sizing: border-box;
		font-size: 32rpx;

		.card_head {
			padding: 20rpx 30rpx;
			background-color: #fff;
			border-bottom: #dcdcdc solid 1rpx;

			.column {
				margin: 20rpx 0;
				width: 70%;
			}

			.icon {
				float: right;
				width: 30%;
				@include flexCenter;
				flex-direction: column;
			}

			.flexBetween {
				@include flexBetween;
			}

			.popup {
				padding: 30rpx;

				.cue {
					font-weight: bold;
					font-size: 40rpx;
					text-align: center;
					padding: 40rpx;
				}

				.button_box {
					@include flexBetween;

					.sure {
						margin-right: 10rpx;
					}
				}

				.button {
					margin-bottom: 20rpx;
				}
			}
		}
		.card {
			padding: 30rpx;
			margin-top: 20rpx;
			background-color: #fff;
		}

		.back {
			background-color: #fff;
			@include flexBetween;
			padding: 20rpx;
		}

		.row {
			@include flexBetween;
			padding: 20rpx 0;
		}

		.title {
			color: $noimportant;
			width: 35%;
		}

		

		.data {
			// display: flex;
			// align-items: right;
			text-align: right;
		}

		.contract {
			display: flex;
			align-items: center;
			margin: 20rpx 0;
		}



	}
</style>